<template>
    <div>
        <div class="content">
            <div class="step">
                <van-steps :active="active" class="steps">
                <van-step>阅读协议</van-step>
                <van-step>认证资料填写</van-step>
                <van-step>项目资料填写</van-step>
                <van-step>等待审核</van-step>
                </van-steps>
            </div>

            <div class="center">
                <div class="xy" v-if="active==0">
                    <p class="xytit">微志益公益平台用户协议</p>
                    <div class="textarea">
                        <div class="txt">
                            <p class="title">微志益公益平台用户协议</p>
                            <p>欢迎您使用微志益公益平台!</p>
                            <p>除非您已阅读并接受本协议所有条款，否则您无权使用本服务。您对本服务的登陆、查看、发布信息等行为即视为您已阅读并同意受本协议的约束。
                            如果您未满18周岁，请在法定监护人的陪同下阅读本协议，并特别注意未成年人使用条款
                            </p>
                            <p>-</p>
                            <p>协议的范围</p>
                            <p>1.本协议是您与腾讯公益之间关于使用腾讯公益平台所订立的协议。</p>
                            <p>2.用户是指使用本平台参与公益活动的个人、企业、机构及其他社会组织，包括但不限于公益机构及捐赠人。</p>
                            <p>3.公益机构是指在本平台上自主发布公益项目，通过直接或借助联合劝募，为各类合法的公益项目筹款，并在本平台公开项目详情，接受公众和行业监督的慈善组织。</p>
                            <p>4.捐赠人是指在本平台上向公益机构完成捐赠行为（包括但不限于：捐款、捐步数、捐微笑、捐知识），用于参与公益机构在本平台上发布的公益项目的用户。</p>
                            <p>-</p>
                            <p>发布、传送、传播、储存违反国家法律法规禁止的内容：</p>
                            <p>1.违反宪法确定的基本原则的；</p>
                            <p>2.危害国家安全，泄露国家秘密，颠覆国家政权，破坏国家统一的；</p>
                            <p>3.损害国家荣誉和利益的；</p>
                            <p>4.煽动民族仇恨、民族歧视，破坏民族团结的；</p>
                            <p>5.破坏国家宗教政策，宣扬邪教和封建迷信的；</p>
                            <p>6.散布谣言，扰乱社会秩序，破坏社会稳定的；</p>
                            <p>7.散布淫秽、色情、赌博、暴力、恐怖或者教唆犯罪的；</p>
                            <p>8.侮辱或者诽谤他人，侵害他人合法权益的；</p>
                            <p>9.煽动非法集会、结社、游行、示威、聚众扰乱社会秩序；</p>
                            <p>10.以非法民间组织名义活动的;</p>
                            <p>11.不符合遵守法律法规、社会主义制度、国家利益、公民合法利益、公共秩序、社会道德风尚和信息真实性等“七条底线”要求的；</p>
                        </div>
                    </div>
                    <div class="check">
                        <input type="checkbox" name="" id="" checked="checked">
                        <label for="">我已阅读并同意
                            <a href="">《微志益公益用户协议》</a>
                        </label>
                    </div>
                    <div class="nextBtn" @click="nextStep">
                        下一步
                    </div>
                </div>

                <div class="renzheng" v-if="active==1">
                    <p class="tit">用户信息登记</p>
                    <p class="tit2">我们有志为社会中诚实守信、切实需要帮助的人群提供一个需要帮助的平台，建立与维护良性互动、健康有序的平台秩序，请您认真填写以下登记信息。</p>
                    <van-divider :style="{ color: '#1989fa', borderColor: '#1989fa', padding: '0 16px' }">
                    </van-divider>

                    <div class="formBox">
                        <van-form  >
                            <van-field
                               
                                name="身份证姓名"
                                label="身份证姓名"
                                placeholder="身份证姓名"
                            />
                            <van-field
                               
                                name="身份证号码"
                                label="身份证号码"
                                placeholder="身份证号码"
                            />
                            <van-field name="uploader" label="半身照">
                                <template #input>
                                    <van-uploader v-model="uploader"   />
                                </template>
                            </van-field>
                            <van-field
                                 
                                name="邮箱地址"
                                label="邮箱地址"
                                placeholder="邮箱地址"
                            />
                            <van-field
                                
                                name="手机号码"
                                label="手机号码"
                                placeholder="手机号码"
                            />
                            <van-field
                               
                                name="微信账号"
                                label="微信账号"
                                placeholder="微信账号"
                            />
                        </van-form>
                        <div class="next" @click="nextStep">
                            保存，继续
                        </div>
                    </div>
                   
                    <div class="Btn" @click="beforStep">
                        返回上一步
                    </div>
                </div>

                <div class="project" v-if="active==2">
                    <div class="procenter">
                        <p class="tit">论坛文章资料填写</p>
                        <p class="tit2">请填写所发布的论坛资料</p>
                        <van-divider :style="{ color: '#1989fa', borderColor: '#1989fa', padding: '0 16px' }">
                        </van-divider>

                        <div class="formBox">
                            <van-form  >
                                <van-field
                                    v-model="model.name"
                                    name="论坛名称"
                                    label="论坛名称"
                                    placeholder="论坛名称"
                                />
                                <van-field
                                    v-model="model.lowzhu"
                                    name="发布者"
                                    label="发布者"
                                    placeholder="发布者"
                                />
                                <van-field name="uploader" label="论坛封面">
                                    <template #input>
                                        <van-uploader v-model="uploadImages" :after-read="onRead" accept="image/*" multiple/>
                                    </template>
                                </van-field>
                                <van-field
                                    name="论坛内容"
                                    label="论坛内容"
                                >
                                    <template #input>
                                        <textarea v-model="model.content"  placeholder="论坛内容" />
                                    </template>
                                </van-field>
                                <van-field
                                    v-model="model.time"
                                    name="发布时间"
                                    label="发布时间"
                                    placeholder="发布时间"
                                />
                                <!-- <van-field
                                    v-model="model.look"
                                    name="浏览量"
                                    label="浏览量"
                                    placeholder="浏览量"
                                /> -->
                                <van-field
                                     
                                    name="微信账号"
                                    label="联系人微信"
                                    placeholder="微信账号"
                                />
                            </van-form>
                            <div class="next" @click="nextStep();tijiao()">
                                保存，继续
                            </div>
                        </div>
                   
                        <div class="Btn" @click="beforStep">
                            返回上一步
                        </div>
                    </div>
                </div>

                <div class="shenghe" v-if="active==3 ">
                    <p>项目正在通过后台审核中，审核完成后即可上线</p>
                    <div class="circle">
                        <van-circle
                            v-model="currentRate"
                           
                            size="180px"
                            :speed="60"
                            text="等待审核"
                            />
                    </div>
                    <div class="Btn" @click="beforStep">
                            返回上一步
                    </div>
                    <div class="indexDiv">
                        回到
                        <span @click="toIndex">首页</span>
                    </div>
                </div>
            </div>
        </div>
        
    </div>
</template>
<script>
import Vue from 'vue';
import { Step, Steps,Divider,Form,Field,Uploader,Circle} from 'vant'
Vue.use(Divider).use(Form).use(Step).use(Steps).use(Field).use(Uploader).use(Circle)      
import { addForum } from '@/api/Forum'
import Axios from 'axios';
export default {
    data() {
    return {
      active: 0,
      uploader: [],
　　  uploadImages:[],
      model:{},
      currentRate: 0,oneurl:[]
    };
  },
  methods:{
      onRead(file) {
    // 　       console.log(file);  //控制台可以看见图片信息
      const param = new FormData();
      param.append("file", file.file);
    //   param.append("token", localStorage.getItem("token"));
      Axios.post("http://localhost:3000/charity/api/upload", param, {
        headers: { "Content-Type": "multipart/form-data" }
      }).then(res => {
        // this.uploadImages.push(res.data.url)
        // console.log(this.uploadImages);
      this.model.img = res.data.url
      });
    }, 
      nextStep(){
          if(this.active<3){
              this.active++;
          }
      },
      beforStep(){
          if(this.active>0){
              this.active--;
          }
      },
      toIndex(){
          this.$router.push('./index')
      },
      tijiao(){
          addForum(this.model)
          alert('提交成功')
          this.$router.push(`/forum`)
      }
  }
}
</script>
<style lang="scss" scoped>
    body{
        color: #73879c;
        // background: #2a3f54;
        .content{
            width: 1200px;
            margin: auto;
            .step{
                padding:30px 40px;
            }
            .center{
                .xy{
                    .xytit{
                        text-align: center;
                        font-size: 20px;
                        font-weight: bold;
                    }
                    .textarea{
                        width: 100%;
                        height: 450px;
                        margin-top: 20px;
                        border: 1px solid #ccc;
                        overflow: hidden;
                        max-height: 450px;
                        overflow-y: scroll;
                        .txt{
                            padding: 20px 40px;
                            .title{
                                text-align: center;
                                font-size: 24px;
                                color: #9b9b9b;
                                padding-bottom: 40px;
                            }
                            p{
                                // color: #9b9b9b;
                                font-size: 14px;
                                margin-top: 10px;
                            }
                        }
                    }
                    .check{
                        font-size: 14px;
                        color: #73879c;
                        padding:20px 40px;
                        a{
                            color: green;
                        }
                    }
                    .nextBtn{
                        width: 100px;
                        height: 34px;
                        box-sizing: border-box;
                        background: #26b99a;
                        border: 1px solid #169f85;
                        border-radius: 3px;
                        padding: 6px 12px;
                        font-size: 14px;
                        font-weight: 400;
                        touch-action: manipulation;
                        cursor: pointer;
                        text-align: center;
                        margin: auto;
                        color: blue;
                    }
                    .nextBtn:hover{
                        color: #fff;
                    }
                }
                .renzheng{
                    padding: 20px 40px;
                    .tit{
                        text-align: center;
                        font-weight: bold;
                        font-size: 18px;
                        color: #5a738e;
                    }
                    .tit2{
                        font-size: 14px;
                        color: #73879c;
                        padding: 20px 0;
                    }
                    .formBox{
                        width: 500px;
                        margin: auto;
                        padding-bottom: 60px;
                        .next{
                            width: 100px;
                            height: 34px;
                            box-sizing: border-box;
                            background: #26b99a;
                            border: 1px solid #169f85;
                            border-radius: 3px;
                            padding: 6px 12px;
                            font-size: 14px;
                            font-weight: 400;
                            touch-action: manipulation;
                            cursor: pointer;
                            text-align: center;
                            float: right;
                            opacity: .8;
                            color: #fff; 
                            .next:hover{
                            opacity: 1;
                            }
                        }
                    
                    }
                    
                    .Btn{
                        width: 100px;
                        height: 34px;
                        box-sizing: border-box;
                        background: #26b99a;
                        border: 1px solid #169f85;
                        border-radius: 3px;
                        padding: 6px 12px;
                        font-size: 14px;
                        font-weight: 400;
                        touch-action: manipulation;
                        cursor: pointer;
                        text-align: center;
                        margin: auto;
                        color: blue;
                    }
                    .Btn:hover{
                        color: #fff;
                    }
                }
                .project{                 
                    .procenter{
                        padding: 20px 40px;
                        .tit{
                            text-align: center;
                            font-weight: bold;
                            font-size: 18px;
                            color: #5a738e;
                        }
                        .tit2{
                            font-size: 14px;
                            color: #73879c;
                            padding: 0px 20px;
                        }
                         .formBox{
                            width: 500px;
                            margin: auto;
                            padding-bottom: 60px;
                        .next{
                            width: 100px;
                            height: 34px;
                            box-sizing: border-box;
                            background: #26b99a;
                            border: 1px solid #169f85;
                            border-radius: 3px;
                            padding: 6px 12px;
                            font-size: 14px;
                            font-weight: 400;
                            touch-action: manipulation;
                            cursor: pointer;
                            text-align: center;
                            float: right;
                            opacity: .8;
                            color: #fff; 
                            .next:hover{
                            opacity: 1;
                            }
                        }
                    }
                    .Btn{
                        width: 100px;
                        height: 34px;
                        box-sizing: border-box;
                        background: #26b99a;
                        border: 1px solid #169f85;
                        border-radius: 3px;
                        padding: 6px 12px;
                        font-size: 14px;
                        font-weight: 400;
                        touch-action: manipulation;
                        cursor: pointer;
                        text-align: center;
                        margin: auto;
                        color: blue;
                    }
                    .Btn:hover{
                        color: #fff;
                    }
                    }
                }
                .shenghe{

                    p{
                        padding: 20px 60px;
                        font-size: 25px;
                        color: #169f85;
                    }
                    .circle{
                        width: 500px;
                        height: 200px;
                        margin: auto;
                        margin-top: 20px;
                        text-align: center;
                    }
                    .indexDiv{
                        margin-top: 40px;
                        color: #9b9b9b;
                        text-align: center;
                        span{
                            color: red;
                            cursor: pointer;
                        }
                        span:hover{
                            text-decoration: underline;
                        }
                    }
                    .Btn{
                        width: 100px;
                        height: 34px;
                        box-sizing: border-box;
                        background: #26b99a;
                        border: 1px solid #169f85;
                        border-radius: 3px;
                        padding: 6px 12px;
                        font-size: 14px;
                        font-weight: 400;
                        touch-action: manipulation;
                        cursor: pointer;
                        text-align: center;
                        margin: auto;
                        color: blue;
                    }
                    .Btn:hover{
                        color: #fff;
                    }
                }
            }
        }
        textarea{
              border: none;
              resize: none;
              cursor: pointer;
        }
    }
</style>